<template>
  <a-card>
    <template #title>
      <h2>数据统计</h2>
      <a-form :model="formState" layout="inline">
        <a-form-item>
          <a-select
            v-model:value="formState.type"
            placeholder="请选择统计的类型"
          >
            <a-select-option value="register">注册人数</a-select-option>
            <a-select-option value="record">对局记录</a-select-option>
            <a-select-option value="essays">发布文章</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="统计时间" v-bind="rangeConfig">
          <a-range-picker
            v-model:value="formState['range']"
            value-format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-button type="primary" @click="statistics()">查询</a-button>
      </a-form>
    </template>
    <div class="chart-container">
      <div
        id="chart"
        class="chart"
        ref="myRef"
        style="height: 45vh; width: 100%"
      />
    </div>
  </a-card>
</template>

<script>
import { reactive, ref } from "vue";
import userApi from "@/apis/userApi";
import * as echarts from "echarts";
export default {
  name: "Statistics",
  setup() {
    const formState = reactive({});

    const xData = ref([]);

    const yData = ref([]);

    const rangeConfig = {
      rules: [
        {
          type: "array",
          required: true,
          message: "请选择统计时间!",
        },
      ],
    };

    const statistics = () => {
      userApi
        .statistics(formState.range[0], formState.range[1], formState.type)
        .then((res) => {
          xData.value = res.date_list;
          yData.value = res.num_list;
          console.log(xData.value, yData.value);
          setChart();
        });
    };

    const setChart = () => {
      // 基于准备好的dom，初始化echarts实例
      const chart = echarts.init(document.getElementById("chart"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        dataZoom: [
          {
            show: true,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,
            start: 10,
            end: 80,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        // x轴是类目轴（离散数据）,必须通过data设置类目数据
        xAxis: {
          type: "category",
          data: xData.value,
        },
        // y轴是数据轴（连续数据）
        yAxis: {
          type: "value",
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          {
            // 系列中的数据内容数组
            data: yData.value,
            // 折线图
            type: "line",
          },
        ],
      };
      chart.setOption(option);
    };

    return {
      // formItemLayout,
      rangeConfig,
      formState,
      statistics,
    };
  },
};
</script>

<style scoped>
</style>